<template>
  <div>
    <div class="topDom">
      <nav_bar title='一拍即点记录' background='#fff' :back="true" :home="true" @back="handlerGobackClick" @home="handlerGohomeClick"></nav_bar>
      <div class="tip"  v-if="newMsg">
            <form name='pushMsgFm' report-submit @submit='orderSign' class="tepForm" >   
              <button form-type="submit"  class="commit">
                  你有新消息，请点击查看！
              </button>  
          </form>
        </div>
    </div>
  <div class="paiHistory">
    
    <notice-bar text="非vip用户，付费后，可查看识别详情并且能放大和保存识别钢材图片" mode="closeable"/>
      <div class="item" v-for="(item,index) of historyData" :key="index">
        <div class="img_wrapper">
          <img :src="item.result_img_url" mode="widthFix" @click="item.status=='1' && prevImg(item.result_img_url)">
        </div>
        <div class="item_msg_wrapper" >
          <div class="item_msg">
            <div class="item_msg_tit">提交时间：</div>
            <div class="item_msg_content">{{item.updated_at}}</div>
          </div>
          <div class="item_msg">
            <div class="item_msg_tit">出厂支数：</div>
            <div class="item_msg_content">{{item.factory_count}}</div>
          </div>
          <div class="item_msg">
            <div class="item_msg_tit">识别数量：</div>
            <div class="item_msg_content">{{item.result_point_num}}</div>
          </div>
          <div class="item_msg">
            <div class="item_msg_tit">异常数量：</div>
            <div class="item_msg_content">{{item.result_abnormal}}</div>
            <div class="pay" @click="pay(item.id)" v-if="item.status=='1' &&item.is_pay=='0'">付费查看</div>
            <div class="pay status_success" v-else-if="item.status=='1' && item.is_pay=='1'">识别完成</div>
            <div class="pay" v-else-if="item.status=='0'">识别失败</div>
          </div>
          
        </div>
      </div>
  </div>
  </div>
</template>
<script>
export default {
  name:'paiHistory',
  data() {
    return {
      newMsg:'',
      img_url:'',
      historyData:[],
      selectId:'',//需要付费的id
      page:1,
      startGetnewsTimer:''
    }
  },
  methods: {
    handlerGobackClick(){
      wx.switchTab({url:`/pages/pai/main`})
    },
    handlerGohomeClick(){
      wx.switchTab({url:'/pages/home/main'})
    },
    prevImg(url){
      wx.previewImage({
          current: url, // 当前显示图片的http链接
          urls: [url] // 需要预览的图片http链接列表
        })
    },
    async getHistory(){
      const userToken=wx.getStorageSync('userToken');
      const res=await this.$request.getData('/ucenter/getOneShotAnonPointList',{
        user_token:userToken,
        page:this.page
      })
      if(res.data.level=='success'){
        let lastData=this.historyData;
        this.historyData=[...lastData,...res.data.data];
        wx.stopPullDownRefresh()
      }
    },
    async pay(id){
      //付费查看
      const answer=await this.$currency.showModal('付费查看点条信息','付费后，能查看识别详情并且能放大和保存识别图片');
      if(answer){
        this.selectId=id;
        this.buildOrder()
      }
    },
    async buildOrder(){
      //生成订单
      var userToken=wx.getStorageSync('userToken');
      const res=await this.$request.postData('/order/buildOrder',{
        user_token:userToken,
        user_point_id:this.selectId,
        type:'user_point',
      })
      if(res.data.level=='success'){
        this.payBuild(res.data.data.order_num)
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
      async payBuild(order_num){
      //支付
      const _this=this
      const userToken=wx.getStorageSync('userToken');
      const res=await this.$request.postData('/payment/weChatPayment',{
        user_token:userToken,
        order_num:order_num
      })
      // this.$currency.showToast(res.data.message);
      if(res.data.level=='success'){
          const data=res.data.data
          setTimeout(()=>{
              wx.requestPayment({
              timeStamp: data.timeStamp,
              nonceStr: data.nonceStr,
              package: data.package,
              signType: data.signType,
              paySign: data.paySign,
                success() {
                _this.$currency.showToast('支付成功')
                setTimeout(()=>{
                _this.getHistory()
                },1500)

                },
                fail(res) {
                console.log('取消支付')
                }
          })
          },1500)
        }
      },
      async startGetnews(){
        //轮询获取新消息s
        const _this=this
        async function timerFn () {
          const userToken=wx.getStorageSync('userToken')

          const data=await _this.$request.getData('/ucenter/oneShotStatus',{
            user_token:userToken
          },false)
          if(data.data.data=='yes'){
            _this.newMsg=true
          }
        _this.startGetnewsTimer=  setTimeout(timerFn, 3000)
        }
        timerFn()
      },
      orderSign(){
        //刷新
        this.page=0;
        this.historyData=[]
        this.getHistory()
        this.newMsg=false
        this.recordState()
      },
      recordState(){
        //点击新消息后触发
        const userToken=wx.getStorageSync('userToken')
        const res=this.$request.postData('/ucenter/cancelOneShotStatus',{
          user_token:userToken
        })
      }
  },
  onLoad(){
    this.startGetnews();
    this.getHistory()
  },
  onReachBottom(){
    this.page++;
    this.getHistory();
  },
   onPullDownRefresh() {
     this.historyData=[];
     this.page=1;
     this.getHistory();
    // Do something when pull down.
  },
  onHide(){
    clearTimeout(this.startGetnewsTimer)
    this.newMsg=''
  },
  onUnload(){
    clearTimeout(this.startGetnewsTimer)
    this.newMsg=''
  }
}
</script>
<style lang="scss" scoped>
  .paiHistory{
    padding:10px;
  }

  .item{
    padding:10px 0;
    border-bottom: 1px solid #eee;
    .img_wrapper{
      width: 100%;
      img{
        // filter:blur(1px);
        width: 100%;
      }
    }
    .item_msg{
      display: flex;
      padding:5px 0;
      align-items: center;
      position: relative;
      .pay{
        position:absolute;
        right: 0;
        color:#fff;
        background:red;
        padding:5px 10px;
        border-radius: 5px;
        margin-bottom:5px;
      }
      .status_success{
          background: #23b6ac;
        }
    }
  }
  .news{
  width: 25px;
  height: 25px;
}
.newTiao{
  background-color: #409eff!important;
  color: #fff !important;
  border-radius:5px;
  padding:4px 8px;
}
.tip{ 
  position: fixed;
  width: 100%;
  z-index: 99;
  button{
    color:#ff3366;
  }
}
</style>
